<template>
    <div style="height: 100%; width: 100%; border: none;">
        <div style="padding-bottom: 15px;">
            <span style="font-weight: 500; font-size: 1.5em;">Dashboard </span>
            <span style="font-size: .9em; font-weight: 200;">header small text goes here...</span>
        </div>
        <div>
            <el-row :gutter="20">
                <el-col :md="6" :sm="12">
                    <div class="col-common total-state">
                        <div style="position: relative; padding-bottom: 20px;">
                            <span style="font-size: 10px; font-weight: 700; color: white; margin: 0 0 10px 0; display: inline-block;">TOTAL VISITORS</span><br>
                            <span style="font-size: 24px; font-weight: 500; color: white;">3,291,922</span>
                            <i class="icon ion-ios-globe globe-icon earth-icon"></i>
                        </div>
                        <a class="bottom-link" href="http://www.baidu.com">
                            <span style="color: white; font-weight: 700; font-size: 10px; margin-right: 5px;">View Detail</span>
                            <i class="icon ion-md-redo" style="color: white; vertical-align: middle;"></i>
                        </a>
                    </div>
                </el-col>
                <el-col :md="6" :sm="12">
                    <div  class="col-common bounce-rate">
                        <div style="position: relative; padding-bottom: 20px;">
                            <span style="font-size: 10px; font-weight: 700; color: white; margin: 0 0 10px 0; display: inline-block;">BOUNCE RATE</span><br>
                            <span style="font-size: 24px; font-weight: 500; color: white;">20.44%</span>
                            <i class="icon ion-ios-download globe-icon rate-icon"></i>
                        </div>
                        <a class="bottom-link" href="http://www.baidu.com">
                            <span style="color: white; font-weight: 700; font-size: 10px; margin-right: 5px;">View Detail</span>
                            <i class="icon ion-md-redo" style="color: white; vertical-align: middle;"></i>
                        </a>
                    </div>
                </el-col>
                <el-col :md="6" :sm="12">
                    <div class="col-common visitors-info">
                        <div style="position: relative; padding-bottom: 20px;">
                            <span style="font-size: 10px; font-weight: 700; color: white; margin: 0 0 10px 0; display: inline-block;">UNIQUE VISITORS</span><br>
                            <span style="font-size: 24px; font-weight: 500; color: white;">1,291,922</span>
                            <i class="icon ion-ios-pie globe-icon pie-icon"></i>
                        </div>
                        <a class="bottom-link" href="http://www.baidu.com">
                            <span style="color: white; font-weight: 700; font-size: 10px; margin-right: 5px;">View Detail</span>
                            <i class="icon ion-md-redo" style="color: white; vertical-align: middle;"></i>
                        </a>
                    </div>
                </el-col>
                <el-col :md="6" :sm="12">
                    <div class="col-common avg-time">
                        <div style="position: relative; padding-bottom: 20px;">
                            <span style="font-size: 10px; font-weight: 700; color: white; margin: 0 0 10px 0; display: inline-block;">AVG TIME ON SITE</span><br>
                            <span style="font-size: 24px; font-weight: 500; color: white;">00:12:23</span>
                            <i class="icon ion-ios-time globe-icon time-icon"></i>
                        </div>
                        <a class="bottom-link" href="http://www.baidu.com">
                            <span style="color: white; font-weight: 700; font-size: 10px; margin-right: 5px;">View Detail</span>
                            <i class="icon ion-md-redo" style="color: white; vertical-align: middle;"></i>
                        </a>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-row :gutter="20">
            <el-col :md="16" :sm="24">
                <my-panel title="Website Analytics (Last 7 Days)" :body-padding="0">
                    <div ref="echarts1" style="width: 100%; height: 300px; background-color: white;"></div>
                </my-panel>
                <my-panel title="Message" :body-padding="0">
                    <ul class="message-box">
                        <li v-for="(msg, index) in msgList" :key="index">
                            <div class="img"><img :src="msg.img" alt="头像"/></div>
                            <div>
                                <p style="font-size: 14px; font-weight: 700;">{{msg.name}}</p>
                                <p>{{msg.content}}</p>
                            </div>
                        </li>
                    </ul>
                </my-panel>
            </el-col>
            <el-col :md="8" :sm="24">
                <my-panel title="Visitors User Agent" :body-padding="0">
                    <div ref="echarts2" style="width: 100%; height: 300px; background-color: white;"></div>
                </my-panel>
                <my-panel title="Todo List" :body-padding="0" style="width: 100%; background-color: white;">
                    <el-table style="width: 100%;" :data="todoList" @select="handleSelect">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <del v-if="scope.row.selected">{{scope.row.content}}</del>
                                <span v-else>{{scope.row.content}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </my-panel>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import myPanel from './my-panel.vue'
    import echarts from 'echarts'

    export default {
        data() {
            return {
                viewsData: [820, 932, 901, 934, 1290, 1330, 1320],
                visitorsData: [783, 873, 489, 904, 478, 589, 485],
                agentData: [
                    {name: 'Chrome', value: 37},
                    {name: 'IE', value: 5},
                    {name: 'Opera', value: 11},
                    {name: 'Safari', value: 16},
                    {name: 'Firefox', value: 32},
                ],
                todoList: [
                    {content: 'Donec vehicula pretium nisl, id lacinia nisl tincidunt id.', selected: false},
                    {content: 'Duis a ullamcorper massa.', selected: false},
                    {content: 'Phasellus bibendum, odio nec vestibulum ullamcorper.', selected: false},
                    {content: 'Duis pharetra mi sit amet dictum congue.', selected: false},
                    {content: 'Phasellus bibendum, odio nec vestibulum ullamcorper.', selected: false},
                    {content: 'Donec vehicula pretium nisl, id lacinia nisl tincidunt id.', selected: false}
                ],
                msgList: [
                    {
                        name: 'John Doe',
                        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id nunc non eros fermentum vestibulum ut id felis. Nunc molestie libero eget urna aliquet, vitae laoreet felis ultricies. Fusce sit amet massa malesuada, tincidunt augue vitae, gravida felis.',
                        img: 'http://www.coloradmin.cn/html/colorapple/assets/img/user-5.jpg'
                    },
                    {
                        name: 'Terry Ng',
                        content: 'Sed in ante vel ipsum tristique euismod posuere eget nulla. Quisque ante sem, scelerisque iaculis interdum quis, eleifend id mi. Fusce congue leo nec mauris malesuada, id scelerisque sapien ultricies.',
                        img: 'http://www.coloradmin.cn/html/colorapple/assets/img/user-6.jpg'
                    },
                    {
                        name: 'Fiona Log',
                        content: 'Pellentesque dictum in tortor ac blandit. Nulla rutrum eu leo vulputate ornare. Nulla a semper mi, ac lacinia sapien. Sed volutpat ornare eros, vel semper sem sagittis in. Quisque risus ipsum, iaculis quis cursus eu, tristique sed nulla.',
                        img: 'http://www.coloradmin.cn/html/colorapple/assets/img/user-8.jpg'
                    },
                    {
                        name: 'John Doe',
                        content: 'Morbi molestie lorem quis accumsan elementum. Morbi condimentum nisl iaculis, laoreet risus sed, porta neque. Proin mi leo, dapibus at ligula a, aliquam consectetur metus.',
                        img: 'http://www.coloradmin.cn/html/colorapple/assets/img/user-7.jpg'
                    }
                ]
            }
        },
        components: {
            'my-panel': myPanel
        },
        methods: {
            /*待办事项表格选择处理事件*/
            handleSelect(selection, row) {
                row.selected = !row.selected;
            }
        },
        mounted() {
            const myChart1 = echarts.init(this.$refs.echarts1, 'light');
            let options1 = {
                /*颜色盘*/
                color: ['#007aff', '#4cd964'],
                /*图例*/
                legend: {
                    data: [{name: 'Page Views', icon: 'circle'}, {name: 'Visitors', icon: 'circle'}],
                    top: 0,
                    right: 0
                },
                /*提示框*/
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    show: true,
                    left: 20,
                    right: 20,
                    top: 20,
                    bottom: 20,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    splitLine: {
                        show: true
                    },
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true
                    }
                },
                series: [{
                    name: 'Page Views',
                    data: this.viewsData,
                    type: 'line'
                },
                {
                    name: 'Visitors',
                    data: this.visitorsData,
                    type: 'line',
                }]
            };
            myChart1.setOption(options1);
            const myChart2 = echarts.init(this.$refs.echarts2);
            let options2 = {
                color: ['#4240a0', '#5856d6', '#8280e0', '#007aff', '#005bbf'],
                tooltip: {},
                legend: {
                    data: [
                        {name: 'Chrome', icon: 'circle'},
                        {name: 'Safari', icon: 'circle'},
                        {name: 'Opera', icon: 'circle'},
                        {name: 'IE', icon: 'circle'},
                        {name: 'Firefox', icon: 'circle'},
                    ],
                    top: 0,
                    right: 0
                },
                series: [{
                    type: 'pie',
                    data: this.agentData,
                    radius: ['50%', '70%']
                }]
            };
            myChart2.setOption(options2);
        }
    }
</script>

<style scoped lang="scss">
    .col-common {
        padding: 15px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        position: relative;
        overflow: hidden;
    }
    .total-state {
        background: linear-gradient(#24d0f4 0,#007aff 100%);
        background: -webkit-linear-gradient(#24d0f4 0,#007aff 100%);
        background: -ms-linear-gradient(#24d0f4 0,#007aff 100%);
        background: -moz-linear-gradient(#24d0f4 0,#007aff 100%);
    }
    .globe-icon {
        display: inline-block;
        position: absolute;
        font-size: 56px;
        line-height: 56px;
        top: 0;
        right: 0;
    }
    .bottom-link {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        text-align: right;
        text-decoration: none;
        padding-bottom: 5px;
        padding-top: 5px;
        padding-right: 15px;
        background: rgba(0,0,0,.3);
        box-sizing: border-box;
        vertical-align: middle;
        line-height: 14px;
    }
    .bottom-link:hover {
        background: rgba(0,0,0,.5);
    }
    .bounce-rate {
        background: linear-gradient(#05dfeb 0,#0a8cbd 100%);
        background: -webkit-linear-gradient(#05dfeb 0,#0a8cbd 100%);
        background: -ms-linear-gradient(#05dfeb 0,#0a8cbd 100%);
        background: -moz-linear-gradient(#05dfeb 0,#0a8cbd 100%);
    }
    .visitors-info {
        background: linear-gradient(#d26ffd 0,#7237b8 100%);
        background: -webkit-linear-gradient(#d26ffd 0,#7237b8 100%);
        background: -ms-linear-gradient(#d26ffd 0,#7237b8 100%);
        background: -moz-linear-gradient(#d26ffd 0,#7237b8 100%);
    }
    .avg-time {
        background: linear-gradient(#f7b90c 0,#f68213 100%);
        background: -webkit-linear-gradient(#f7b90c 0,#f68213 100%);
        background: -ms-linear-gradient(#f7b90c 0,#f68213 100%);
        background: -moz-linear-gradient(#f7b90c 0,#f68213 100%);
    }
    .earth-icon,.rate-icon,.pie-icon,.time-icon {
        color: rgba(0,0,0,.5);
    }
    .el-col {
        padding-bottom: 15px;
    }
    @mixin border-radius($radius) {
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
        border-radius: $radius;
    }
    .message-box {
        /*max-height: 300px;*/
        /*overflow: auto;*/
        list-style: none;
        background-color: #fff;
        padding: 0 15px;
        li {
            border-bottom: 1px solid #eee;
            padding: 15px 10px;
        }
        li:hover {
            cursor: pointer;
        }
        .img {
            display: table-cell;
            vertical-align: middle;
        }
        img {
            @include border-radius(32px);
            width: 64px;
            height: 64px;
        }
        div {
            display: table-cell;
            font-size: 12px;
            word-break: break-all;
            vertical-align: middle;
            padding-left: 10px;
        }
    }
</style>
